• List of States
• iOS Style Login Screen
• iOS Style Settings Screen
• Menu with CSS Icons
• List of Names using a free-form layout template
• List of Names formatted like a Columnar List
• Star Rating
• Star Rating (with support for half stars)
• List of orders for a customer (from the Northwind sample database)
• List of orders for a customer (uses static JSON data)
• Image Map
• Checkbox control - horizontal
• Checkbox control - vertical
• Radiobutton control - horizontal
• Radiobutton control - vertical
• Step indicator - shows position in a series of steps
• Menu tree

 

List of orders for a customer (from the Northwind sample database)

Description

Example showing a list of orders for a customer based on data in the Northwind sample database. Requires a named SQL connection string called 'northwind'.

Discussion

This example the shows how rich HTML output can be created by merging data in a JavaScript object with a Client Side Template. This example can be thought of as a client-side report writer. It would be easy to make various parts of the report 'hot' (i.e. fire events) by adding event handlers into the HTML template defined in the ViewBox.

This sample is the same as the List of orders for a customer (uses static JSON data) sample. The difference between the two samples is that this sample demonstrates loading data dynamically from a SQL database. The SQL Database used is the Northwind database, which ships with Alpha Anywhere. In order to use this example, you must first create a connection string to the Northwind database named "Northwind".

The List of orders for a customer (from the Northwind sample database) template example is loaded by clicking the Load Sample ViewBox link on the Home tab of the ViewBox Builder.

If you do not have a connection string called "Northwind" that connects to the Northwind database, you can create one as follows:

1. Open the ViewBox Builder for the ViewBox control loaded with the List of orders for a customer (from the Northwind sample database) sample.

2. On the Data Source tab, click the [...] button to open the Nested SQL Query editor.

   

3. Click the Select... button to open the Connection String dialog.

   

4. In the Connection String dialog, click the Edit Saved Connections link to open the Connection string editor.

   

5. Select the AADemo-Northwind connection string. If the AADemo-Northwind connection string is not listed, click the Create 'AADemo-Northwind' demo connection string link to create one. This link will only be available if the AADemo-Northwind connection string does not exist.

   With the AADemo-Northwind connection string selected, click the Copy button.

   

6. Next, click the New button to create a new connection string. Paste the copied connection string in the Connection String text box. Name the connection string "Northwind".

   

7. Test the connection string to verify that it worked. If the connection string fails to work, please follow the instructions in the Creating AlphaDAO Connection Strings tutorial to create a connection string to the Northwind database.

   

8. Click OK to save the new connection string.

   In the Connection String dialog, click Cancel to close the dialog without changing anything. Your connection string not be deleted.

   Continue to close all dialogs by clicking the Cancel button. Once you have returned to the UX Builder, run your component in Working Preview to verify your new connection string is working.

See Also

• Client Side Template Syntax